<template>
   <div class="iphones-details-content-top">
      <el-row :gutter="20">
         <el-col :span="10">
            <div class="left">
               <div class="preview">
                  <div ref="previewBooth" class="preview-booth" v-if="firstImgUrl !== null">
                     <img ref="swiperImg" v-lazy="firstImgUrl" alt="">
                  </div>
                  <div class="preview-thumb"
                       v-if="colorImg !== null"
                  >
                     <ul>
                        <li v-for="(item, index) in colorImg"
                            :key="index"
                            @click="_replaceUrl(item, index)"
                            :class="{'avtion': previewIndex === index}"
                        >
                           <img v-lazy="item['img_url_X_'+index]" alt="">
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="Collection" @click="_Collection">
                  <i class="el-icon-star-off" v-if="closeCollection">收藏</i>
                  <i class="el-icon-star-on" v-else>收藏</i>
               </div>
            </div>
         </el-col>
         <el-col :span="14">
            <div class="right">
               <h1 class="title">
                  {{getCrumbsName[1].NavName}}
               </h1>
               <div class="price" v-if="price !== null">
                  <span>价&nbsp;&nbsp;&nbsp;&nbsp;格:</span>
                  <span>¥{{price}}</span>
               </div>
               <div class="edition">
                  <div class="title">版&nbsp;&nbsp;&nbsp;&nbsp;本 :</div>
                  <div class="edition-rigth">
                     <div v-for="(item, index) in writtenMessage[0].versionsName.versions_S" :key="index">
                        <div class="btn"
                             :class="{'btn-avtion': index_edition === index}"
                             @click="_switch(item, index)"
                        >
                           {{item.versions}}
                        </div>
                     </div>
                  </div>
               </div>
               <div class="edition-bottom"
                    v-for="(item, index) in writtenMessage.slice(1)"
                    :key="index"
               >
                  <div class="edition-rigth"
                       v-for="(items, indexs) in item.clearfix"
                       :key="indexs"
                       @click="_titleSwiper(indexs)"
                  >
                     <p class="title" :class="{'avtion':titleIndex === indexs}">{{items.property_name}}</p>
                  </div>
               </div>
            </div>
            <div class="Color_classification">
               <div class="color-title">
                  颜色分类:
               </div>
               <div class="color-btn" v-if="colorClassification !== null">
                  <div class="btn"
                       v-for="(item, index) in colorClassification"
                       :key="index"
                       :class="{'color-avtion': colorIndex === index}"
                       @click="_swiperColor(item, index)"
                  >
                     {{item.Model_color}}
                  </div>
               </div>
            </div>
            <hr/>
            <!---->
            <div class="Shopping-Cart">
               <div>
                  立即购买
               </div>
               <div>
                  加入购物车
               </div>
            </div>
         </el-col>
      </el-row>
      <message v-show="false" ref="message"></message>
      <model v-if="isModelDisplay"
             @loginPage="_loginPage"
             @cancelModel = "_cancelModel"
             :titleText="titleText"
             ref="model"
      ></model>
   </div>
</template>

<script>
   import {mapGetters} from 'vuex'
   import {lists} from '../../assets/util/util'
   import model from '../model-box/model-box'
   import message from '../message-box/message-box'
   export default {
      name: 'iphonesDetailsContentTop',
      props: {
         writtenMessage: {
            type: Array,
            required: true,
            default() {
               return []
            }
         }
      },
      data() {
         return {
            price: null,
            index_edition: 0,
            colorClassification: null,
            colorIndex: 0,
            colorImg: null,
            firstImgUrl: null,
            previewIndex: 0,
            titleIndex: 1,
            closeCollection: true,
            isModelDisplay: false,
            titleText: ''
         }
      },
      computed: {
         ...mapGetters([
            'getCrumbsName',
            'collectionData',
            'loginMessage',
            'loginState'
         ])
      },
      mounted() {
         this._price()
         this._initData()
      },
      methods: {
         _price() {
            this.price = this.writtenMessage[0].versionsName.versions_S[0].price
         },
         _initData() {
            this.colorClassification = this.writtenMessage[0].versionsName.versions_S[0].color
            this.colorImg = this.writtenMessage[0].versionsName.versions_S[0].color[0].data[0].color_classification
            this.firstImgUrl = this.colorImg[0].img_url_D_0
         },
         _switch(item, index) {
            this.colorIndex = 0
            this.index_edition = index
            this.price = item.price
            this.colorClassification = item.color
            this._reusing(item.color[0])
         },
         _swiperColor(item, index) {
            console.log(item.data)
            this.colorIndex = index
            this.firstImgUrl = item.data[0].color_classification[0].img_url_D_0
            this._reusing(item)
         },
         _replaceUrl(item, index) {
            this.previewIndex = index
            this.firstImgUrl = item['img_url_D_' + index]
            let elem = this.$refs.previewBooth
            lists.addClass(elem, 'opacity')
            elem.style.opacity = 1
         },
         _reusing(item) {
            this.firstImgUrl = item.data[0].color_classification[0].img_url_D_0
            this.colorImg = item.data[0].color_classification
            console.log(this.colorImg)
         },
         _titleSwiper(index) {
         },
         _CollectionDisplay() {
            this._loginState()
         },
         async _Collection() {
            if (this.loginState === false) {
               this.isModelDisplay = true
               this.$nextTick(() => {
                  this.titleText = '你目前还没登录是否跳转登录'
                  this.$refs.model._getById({
                     dtermineName: 'loginPage',
                     cancelName: 'cancelModel'
                  })
               })
               return
            }

            if (!this.closeCollection) {
               this.$refs.message.open2('已收藏过不必再收藏', 'warning')
               return
            }

            // let id = this.collectionData.id
            // let select = true
            // let data = await this.$axios.get('/apis/collection/select', {
            //    params: {
            //       id,
            //       select
            //    }
            // })
            // if (data.data.success) {
            //    this._loginState()
            // }

            let body = this.collectionData
            body['userName'] = this.loginMessage.user.userName
            body['select'] = true
            let data2 = await this.$axios.post('/apis/collection/collection', body)
            if (data2.data.result.ok === 1) {
               this._loginState()
               this.$refs.message.open2('收藏成功')
            }
         },
         _loginState() {
            if (this.loginState === false) {
               this.closeCollection = true
            } else {
               this.closeCollection = false
            }
         },
         _loginPage() {
            this.$router.push({path: '/login'})
         },
         _cancelModel(is) {
            this.isModelDisplay = is
         }
      },
      components: {
         message,
         model
      }
   }
</script>

<style scoped lang="stylus">
   .iphones-details-content-top
      height 660px
      width 100%
   .preview
      margin 0 auto
      height 565px
      width 495px
      display flex
      flex-wrap wrap
      .preview-booth
         height 375px
         margin 0 auto
         width 375px
         transition all 1s
         img
            margin-top 20px
            width 100%
            height 100%
      .opacity
         opacity 0
      .preview-thumb
         width 100%
         ul
            display flex
            justify-content space-between
            box-sizing border-box
            padding 50px
            li
               height 85px
               width 85px
               box-sizing border-box
               border 1px solid transparent
               padding 5px
               cursor pointer
               img
                  width 75px
                  height 75px
            li.avtion
               border-color #999
   .right
      .title
         font-weight 500
         font-size 30px
      .price
         margin 25px 0
         box-sizing border-box
         padding-left 30px
         background-color #f4f4f4
         height 60px
         line-height 60px
         width 100%
         span
            color #999
            font-size 14px
         span:nth-child(2)
            margin-left 10px
            font-size 25px
            font-weight 900
            color red
      .edition, .edition-bottom
         display flex
         align-items center
         height 44px
         width 100%
         margin 10px 0
         .title
            margin-right 10px
            font-size 14px
      .edition-rigth
         display flex
         align-items center
      .btn
         display flex
         cursor pointer
         padding 0 5px
         margin-right 10px
         justify-content center
         align-items center
         border 1px solid #999
         border-radius 5px
         font-size 14px
         color #666
         min-width 68px
         min-height 34px
      .btn-avtion
         border-color aqua
   .edition-bottom div:not(:nth-child(1)) p.avtion
      display flex
      cursor pointer
      padding 0 5px
      margin-right 10px
      justify-content center
      align-items center
      border 1px solid aqua
      border-radius 5px
      font-size 14px
      color #666
      min-width 68px
      min-height 34px
   .Color_classification
      margin 25px 0
      display flex
      align-items center
      .color-title
         margin-right 10px
         color #000
         font-size 14px
      .color-btn
         display flex
         .btn
            display flex
            cursor pointer
            padding 0 5px
            margin-right 10px
            justify-content center
            align-items center
            border 1px solid #666
            border-radius 5px
            font-size 14px
            color #666
            min-width 68px
            min-height 34px
         .color-avtion
              border-color aqua
   hr
      background #bcbbbb
   .Shopping-Cart
      display flex
      margin 50px 0 0 30px
      div
         border 1px solid transparent
         border-radius 5px
         background red
         color #fff
         text-align center
         line-height 40px
         height 40px
         width 100px
         cursor pointer
         &:hover
            opacity .8
      div:nth-child(2)
         background #4DCFF6
         margin-left 40px
      div:nth-child(1)
         background #FE7476
         margin-left 40px
   .Collection
      padding 0 50px
      i
         cursor pointer
</style>
